<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	<!-- 	4.制作4个嵌套DIV ，要求：
		      1.每个父DIV尺寸必须大于子DIV
		      2.实现每个DIV在父DIV正中间
		      3.每个DIV至少要包含一个非DIV元素，比如：文字，P标签，A标签，图片等
		      4.通过最底层DIV，打印每层父DIV，如：
			1级父元素为（），1级父节点为（）
			2级父元素为（），2级父节点为（）
			....
		      5.查找每个DIV的子元素和子节点 -->
			 <style type="text/css">
			  	div {
			  				position: absolute;
			  				top: 50%;
			  				left: 50%;
			  				transform: translate(-50%, -50%);
			  	
			  			}
			  </style>
	</head>
	<body>
		<div id="div1" style="width: 500px;height: 500px;background-color: burlywood;" >
			<h3>我是曾祖父</h3>
			<div id="div2" style="width: 400px;height: 400px;background-color: chocolate;" >
				<p>我是爷爷</p>
				<div id="div3" style="width: 300px;height: 300px;background-color: coral;" >
					<p>我是爸爸</p>
					<div id="div4" style="width: 200px;height: 200px;background-color: darkgoldenrod;" >
						<button type="button" onclick="fatherDIV();">最底层DIV，打印每层父DIV</button>
						<button type="button" onclick="chil();">每个DIV的子元素和子节点</button>
						<p>我是儿子</p>
						<img src="../img/u=1915816833,3554208343&fm=26&fmt=auto.webp" width="100px" height="100px" >
					</div>
				</div>
		    </div>
		</div>
</body>
<script type="text/javascript">
	function fatherDIV(){
		var father=document.getElementById('div4');
		//获取父元素
		console.log('第一级父元素为：');
		console.log(div4.parentElement);
		//获取父节点
		console.log('第一级父节点为：');
		console.log(div4.parentNode);
		console.log('第二级父元素为：');
		console.log(div4.parentElement.parentElement);
		console.log('第二级父节点为：');
		console.log(div4.parentNode.parentNode);
		console.log('第三级父元素为：');
		console.log(div4.parentElement.parentElement.parentElement);
		console.log('第三级父节点为：');
		console.log(div4.parentNode.parentNode.parentNode);
		console.log('第四级父元素为：');
		console.log(div4.parentElement.parentElement.parentElement.parentElement);
		console.log('第四级父节点为：');
		console.log(div4.parentNode.parentNode.parentNode.parentNode);
		console.log('第五级父元素为：');
		console.log(div4.parentElement.parentElement.parentElement.parentElement.parentElement);
		console.log('第五级父节点为：');
		console.log(div4.parentNode.parentNode.parentNode.parentNode.parentNode);
		console.log('第六级父元素为：');
		console.log(div4.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement);
		console.log('第六级父节点为：');
		console.log(div4.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode);
	}
	function chil(){
		//获取子元素
		console.log('第一个DIV的子元素为：');
		console.log(document.getElementById('div1').children);
		//获取子节点
		console.log('第一个DIV的子节点为：');
		console.log(document.getElementById('div1').childNodes);
		console.log('第二个DIV的子元素为：');
		console.log(document.getElementById('div2').children);
		console.log('第二个DIV的子节点为：');
		console.log(document.getElementById('div2').childNodes);
		console.log('第三个DIV的子元素为：');
		console.log(document.getElementById('div3').children);
		console.log('第三个DIV的子节点为：');
		console.log(document.getElementById('div3').childNodes);
		console.log('第四个DIV的子元素为：');
		console.log(document.getElementById('div4').children);
		console.log('第四个DIV的子节点为：');
		console.log(document.getElementById('div4').childNodes);
	}
</script>
</html>
